<template>
  <div class="ant-form-page">
    <div class="form-container">
      <div class="form-header">
        <h1 class="form-title">Ant Design Vue 表单测试</h1>
        <p class="form-description">
          这里展示了 Ant Design Vue 组件库的各种表单组件，包括输入框、选择器、日期选择器等。
        </p>
      </div>

      <a-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        class="demo-form"
        size="large"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <h3 class="section-title">基本信息</h3>

          <a-form-item label="姓名" name="name">
            <a-input v-model:value="formData.name" placeholder="请输入姓名" allow-clear />
          </a-form-item>

          <a-form-item label="邮箱" name="email">
            <a-input v-model:value="formData.email" placeholder="请输入邮箱地址" type="email" allow-clear />
          </a-form-item>

          <a-form-item label="手机号" name="phone">
            <a-input v-model:value="formData.phone" placeholder="请输入手机号码" allow-clear />
          </a-form-item>

          <a-form-item label="性别" name="gender">
            <a-radio-group v-model:value="formData.gender">
              <a-radio value="male"> 男 </a-radio>
              <a-radio value="female"> 女 </a-radio>
              <a-radio value="other"> 其他 </a-radio>
            </a-radio-group>
          </a-form-item>
        </div>

        <!-- 详细信息 -->
        <div class="form-section">
          <h3 class="section-title">详细信息</h3>

          <a-form-item label="出生日期" name="birthDate">
            <a-date-picker v-model:value="formData.birthDate" placeholder="选择日期" style="width: 100%" />
          </a-form-item>

          <a-form-item label="所在城市" name="city">
            <a-select v-model:value="formData.city" placeholder="请选择城市" allow-clear>
              <a-select-option v-for="city in cityOptions" :key="city.value" :value="city.value">
                {{ city.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="兴趣爱好" name="hobbies">
            <a-checkbox-group v-model:value="formData.hobbies">
              <a-checkbox value="reading"> 阅读 </a-checkbox>
              <a-checkbox value="music"> 音乐 </a-checkbox>
              <a-checkbox value="sports"> 运动 </a-checkbox>
              <a-checkbox value="travel"> 旅行 </a-checkbox>
              <a-checkbox value="coding"> 编程 </a-checkbox>
            </a-checkbox-group>
          </a-form-item>

          <a-form-item label="技能等级" name="skillLevel">
            <a-slider
              v-model:value="formData.skillLevel"
              :min="0"
              :max="100"
              :step="10"
              :marks="{ 0: '0', 50: '50', 100: '100' }"
            />
          </a-form-item>

          <a-form-item label="是否同意" name="agree">
            <a-switch v-model:checked="formData.agree" checked-children="同意" un-checked-children="不同意" />
          </a-form-item>

          <a-form-item label="个人简介" name="bio">
            <a-textarea
              v-model:value="formData.bio"
              placeholder="请输入个人简介"
              :rows="4"
              :maxlength="500"
              show-count
            />
          </a-form-item>
        </div>

        <!-- 表单操作 -->
        <a-form-item :wrapper-col="{ offset: 6, span: 18 }" class="form-actions">
          <a-button type="primary" :loading="loading" @click="handleSubmit">
            {{ localeStore.t('common.submit') }}
          </a-button>
          <a-button style="margin-left: 8px" @click="handleReset">
            {{ localeStore.t('common.reset') }}
          </a-button>
          <a-button type="dashed" style="margin-left: 8px" @click="handlePreview">
            {{ localeStore.t('common.preview') }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <!-- 数据预览对话框 -->
    <a-modal v-model:open="previewVisible" title="表单数据预览" width="600px" :footer="null">
      <div class="preview-content">
        <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
      </div>
      <template #footer>
        <a-button @click="previewVisible = false"> 关闭 </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormInstance } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { useLocaleStore } from '@/stores/locale';

const localeStore = useLocaleStore();

// 表单引用
const formRef = ref<FormInstance>();

// 表单数据
const formData = reactive({
  name: '',
  email: '',
  phone: '',
  gender: '',
  birthDate: null,
  city: '',
  hobbies: [] as string[],
  skillLevel: 50,
  agree: false,
  bio: '',
});

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
  ],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  city: [{ required: true, message: '请选择所在城市', trigger: 'change' }],
  agree: [
    {
      validator: (_rule: any, value: boolean) => {
        if (!value) {
          return Promise.reject('请同意相关条款');
        }
        return Promise.resolve();
      },
      trigger: 'change',
    },
  ],
};

// 城市选项
const cityOptions = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' },
  { label: '深圳', value: 'shenzhen' },
  { label: '杭州', value: 'hangzhou' },
  { label: '成都', value: 'chengdu' },
  { label: '西安', value: 'xian' },
  { label: '武汉', value: 'wuhan' },
];

// 状态管理
const loading = ref(false);
const previewVisible = ref(false);

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    loading.value = true;

    // 模拟提交请求
    window.setTimeout(() => {
      loading.value = false;
      message.success('表单提交成功！');
      console.log('提交的数据:', formData);
    }, 2000);
  } catch {
    message.error('请检查表单填写是否正确');
  }
};

// 重置表单
const handleReset = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
  message.info('表单已重置');
};

// 预览数据
const handlePreview = () => {
  previewVisible.value = true;
};
</script>

<style scoped></style>
